<template>
    <page-main title="教学跟踪" title-icon="dashboard">
        <el-row
            class="flex justify-center align-center"
            style="margin-bottom: 20px;"
        >
            <el-col :md="12">
                <span>
                    <el-select v-model="value" placeholder="请选择">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </span>
            </el-col>
            <el-col :md="12" style="text-align: right;">
                <button-panel icon="el-icon-download" title="导出数据" @click="todoExcel" />
            </el-col>
        </el-row>
        <div class="track-table">
            <table-pane
                ref="tablePane"
                :table-title-data="tableTitleData"
                :table-data="teachingTaskList"
                :config-flag="{ needPage: true }"
                :pager="listPagination"
                @handleSizeChange="handleSizeChange"
                @handleCurrentChange="handleCurrentChange"
            >
                <div slot="actions" slot-scope="props">
                    <el-button
                        type="primary"
                        size="small"
                        @click="toTrackDetail(props.scope.row)"
                    >
                        查看详情
                    </el-button>
                </div>
            </table-pane>
        </div>
    </page-main>
</template>

<script>
import PageMain from '@/components/PageMain'
import TablePane from '@/components/tablePanel/table'
import {currentDate} from '@/util/date'
import {mapMutations} from 'vuex'
import ButtonPanel from '@/components/buttonPanel/buttonPanel'

export default {
    name: 'Index',
    components: {ButtonPanel, TablePane, PageMain},
    beforeRouteEnter(to, form, next) {
        next(vm => {
            vm.add('Index')
            // vm.$store.commit('keepAlive/add', 'Index')
        })
    },
    beforeRouteLeave(to, from, next) {
        if (!['teachingTrackDetail'].includes(to.name)) {
            this.remove('Index')
            // this.$store.commit('keepAlive/remove', 'Index')
        }
        next()
    },
    data() {
        return {
            listPagination: {
                current: 1,
                size: 10,
                totalCount: 0
            }, // 分页
            tableTitleData: [
                {
                    label: '实训名称',
                    value: 'name',
                    align: 'center'
                },
                {
                    label: '专业',
                    value: 'discipline',
                    align: 'center'
                },
                {
                    label: '班级',
                    value: 'class',
                    align: 'center'
                },
                {
                    label: '组名',
                    value: 'groupName',
                    align: 'center'
                },
                {
                    label: '组长',
                    value: 'GroupLeader',
                    align: 'center'
                },
                {
                    label: '操作',
                    slotName: 'actions'
                }
            ],
            teachingTaskList: [],
            options: [
                {
                    value: '选项1',
                    label: '黄金糕'
                },
                {
                    value: '选项2',
                    label: '双皮奶'
                },
                {
                    value: '选项3',
                    label: '蚵仔煎'
                },
                {
                    value: '选项4',
                    label: '龙须面'
                },
                {
                    value: '选项5',
                    label: '北京烤鸭'
                }
            ],
            value: ''
        }
    },
    mounted() {
        this.getTeachingTrackData()
    },
    methods: {
        ...mapMutations('teachingTrack', ['setTrackTableData']),
        ...mapMutations('keepAlive', ['add', 'remove']),
        toggerCheck() {
            this.teachingTaskList.forEach(item => {
                this.$refs.tablePane.$refs.tables.toggleRowSelection(item)
            })
        },
        test() {
            this.teachingTaskList.forEach(item => {
                this.$refs.tablePane.$refs.tables.toggleRowSelection(
                    item,
                    true
                )
            })
        },
        todoExcel() {
            const loading = this.$loading({
                lock: true,
                text: '导出数据中。。。',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            })
            const titleArr = []
            const tableArr = []
            this.tableTitleData.map(item => {
                if (item.label !== '操作') {
                    titleArr.push(item.label)
                }
            })
            this.teachingTaskList.map(item => {
                tableArr.push([
                    item.name,
                    item.discipline,
                    item.class,
                    item.groupName
                ])
            })
            this.$ToDoExcel(
                `${currentDate.date}-教学跟踪信息`,
                titleArr,
                tableArr
            )
            loading.close()
            this.$message.success('导出数据成功')
        },
        getTeachingTrackData() {
            const {current, size} = this.listPagination
            this.$api
                .get('/track/list', {
                    params: {
                        pagesize: size,
                        pageIndex: current
                    }
                })
                .then(res => {
                    const {total, list} = res
                    this.listPagination.totalCount = total
                    this.teachingTaskList = list
                })
        },
        toTrackDetail(val) {
            this.setTrackTableData(val)
            this.$router.push('/teachingTrack/index/detail')
        },
        handleSizeChange(val) {
            this.listPagination.size = val
            this.getTeachingTrackData()
        },
        handleCurrentChange(val) {
            this.listPagination.current = val
            this.getTeachingTrackData()
        }
    }
}
</script>

<!--<style scoped>-->

<!--</style>-->
